<template>
	<div>
		<el-dialog :close-on-click-modal="false" draggable v-model="visible" width="25%">
      <div class="descriptions-box">
      <el-descriptions direction="horizontal" :column="1" :size="size" border>
        <el-descriptions-item label-class-name="descriptions-item" :label="$t('bar.barCode')" :span="1">{{info.barcode }}</el-descriptions-item>
        <el-descriptions-item label-class-name="descriptions-item" :label="$t('bar.quantity')" :span="1">{{info.currentQty }}</el-descriptions-item>
        <el-descriptions-item label-class-name="descriptions-item" :label="$t('bar.machineNumber')" :span="1"></el-descriptions-item>
        <el-descriptions-item label-class-name="descriptions-item" :label="$t('bar.materialcode')" :span="1">{{info.materialCode}}</el-descriptions-item>
        <el-descriptions-item label-class-name="descriptions-item" :label="$t('bar.materialname')" :span="1">{{info.materialName}}</el-descriptions-item>
        <el-descriptions-item label-class-name="descriptions-item" :label="$t('bar.materialspec')" :span="1">{{info.materialSpec}}</el-descriptions-item>
        <el-descriptions-item :label="$t('bar.productionBatch')" :span="1"></el-descriptions-item>
      </el-descriptions>
      <div class="imgBox">
        <img :src="qrcode" alt="QR Code" style="width: 100%; height: 100%" />
      </div>
      </div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { MaybeRefOrGetter } from '@vueuse/core';
import { useQRCode } from '@vueuse/integrations/useQRCode';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);

let qrcode = useQRCode('');

let code = ref();
let info =ref()

export declare function useQRCode(text: MaybeRefOrGetter<string>, options?: QRCode.QRCodeToDataURLOptions): Ref<string>;

// 打开弹窗
const openDialog = async (row: any) => {
  console.log(row,'----')
  info.value = row
	code.value = row.barcode;
	qrcode = useQRCode(row.barcode);
	visible.value = true;
	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style lang="scss" scoped>
.descriptions-box{
  width: 100%;
  height: 100%;
  position: relative;
}
:deep(.descriptions-item){
  width: 120px;
}

.imgBox{
  width: 159px;
  height: 159px;
  position: absolute;
  top: 1px;
  right: 1px;
  border-left: 1px solid #ebeef5;
}
</style>
